<template>
    <div>
        <TableHeader
            :quick-search-placeholder="'通过组名模糊搜索'"
            :buttons="['refresh', 'add', 'edit', 'delete', 'unfold', 'quickSearch', 'columnDisplay']"
        ></TableHeader>
        <Table ref="tableRef"></Table>
    </div>
</template>
<script setup lang="ts">
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import aaTableClass from '/@/utils/aaTable'

defineOptions({
    name: 'auth/role',
})

const tableRef = ref()
const data = [
    {
        id: 1,
        pid: 0,
        name: '超级管理组',
        rules: '超级管理员',
        status: '1',
        update_time: 1738917624,
        create_time: 1738917624,
        children: [
            {
                id: 2,
                pid: 1,
                name: '一级管理员',
                rules: '控制台等 59 项',
                status: '1',
                update_time: 1738917624,
                create_time: 1738917624,
                children: [
                    {
                        id: 3,
                        pid: 2,
                        name: '二级管理员',
                        rules: '会员管理等 23 项',
                        status: '1',
                        update_time: 1738917624,
                        create_time: 1738917624,
                        children: [
                            {
                                id: 4,
                                pid: 3,
                                name: '三级管理员',
                                rules: '数据安全管理等 21 项',
                                status: '1',
                                update_time: 1738917624,
                                create_time: 1738917624,
                            },
                        ],
                    },
                ],
            },
        ],
    },
]
const aaTable = new aaTableClass({
    column: [
        { type: 'selection', align: 'center' },
        { label: '组别名称', prop: 'name', align: 'center', width: '160' },
        { label: '权限', prop: 'rules', align: 'center', width: '160' },
        {
            label: '状态',
            prop: 'status',
            align: 'center',
            width: '160',
            render: 'tag',
            custom: { '0': 'danger', '1': 'success' },
            replaceValue: { '0': '禁用', '1': '启用' },
        },
        { label: '修改时间', prop: 'update_time', align: 'center', width: '160', render: 'datetime' },
        { label: '创建时间', prop: 'create_time', align: 'center', width: '160', render: 'datetime' },
        {
            label: '操作',
            prop: 'operation',
            align: 'center',
            width: '160',
            render: 'buttons',
            buttons: [
                {
                    name: '编辑',
                    icon: 'fa fa-pencil',
                    render: 'tipButton',
                    title: '编辑',
                    type: 'primary',
                    click(row, field) {
                        console.log(row, field)
                    },
                },
                {
                    name: '删除',
                    icon: 'fa fa-trash',
                    render: 'confirmButton',
                    title: '删除',
                    type: 'danger',
                    popconfirm: {
                        confirmButtonType: 'danger',
                        title: 'Are you sure to delete the selected record?',
                    },
                    click(row, field) {
                        console.log(row, field)
                    },
                },
            ],
        },
    ],
    pagination: false,
    data: data,
    total: 15,
})

provide('aaTable', aaTable)

onMounted(() => {
    aaTable.table.ref = tableRef.value
})
</script>
